<template>
  <!-- <div class="zuti_container"> -->
  <el-card>
    <!-- 顶部搜索栏 -->
    <el-form ref="form" label-width="80px">
      <el-row type="flex" justify="space-between" :inline="true">
        <el-form-item label="关键字" style="margin-right: 40px">
          <el-input
            style="width: 140%"
            placeholder="请输入关键字"
            v-model="queryData.title"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="initData"
            icon="el-icon-search"
            size="small"
            type="primary"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="small"
            type="reset"
            @click="closes"
            >清除</el-button
          >
        </el-form-item>
        <div style="flex: 1"></div>
        <el-row type="flex" justify="end">
          <el-form-item label="">
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="$refs.addPermission.dialogVisible = true"
              >新增权限组</el-button
            >
          </el-form-item>
        </el-row>
      </el-row>
    </el-form>
    <el-alert :closable="false" title="数据一共10条" type="info"> </el-alert>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" prop="creator" align="center" label="">
      </el-table-column>
      <el-table-column prop="title" align="center" label="用户名" width="380">
      </el-table-column>
      <el-table-column
        prop="update_date"
        align="center"
        label="日期"
        width="380"
      >
        <template slot-scope="{ row }">
          <span
            >{{ $moment(row.update_date).format("YYYY-MM-DD hh:mm:ss") }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            size="small"
            type="primary"
            plain
            @click="edit(row.id)"
            circle
            icon="el-icon-edit"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            plain
            @click="del(row.id)"
            circle
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[3, 5, 8]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </el-row>
    <addPermission @updataList="initData" ref="addPermission"></addPermission>
  </el-card>
  <!-- </div> -->
</template>

<script>
import {
  getPermissionList,
  getMenusList,
  tree,
  tranListTreeData,
  delPermissionApi,
  getPermissionInfoList,
} from "@/api/permissions";
import addPermission from "./components/addPermission.vue";
export default {
  components: { addPermission },
  name: "Permission",
  data() {
    return {
      tableData: [],
      queryData: {
        page: 1,
        pagesize: 5,
        title: "",
      },
      count: 0,
      loading: false,
    };
  },
  created() {
    this.initData();
    this.getMenusList();
  },
  methods: {
    closes() {
      this.queryData.title = "";
      this.initData();
    },
    async getMenusList() {
      let res = await getMenusList();
      //处理成树型结构，先递归拆分所有的，在递归整合
      this.$refs.addPermission.data = [
        {
          id: 1,
          pid: null,
          title: "系统菜单和页面权限点",
          children: tranListTreeData(tree(res), null),
        },
      ];
      // const arrs
    },
    async initData() {
      this.loading = true;
      try {
        const { counts, list } = await getPermissionList(this.queryData);
        this.count = counts;
        this.tableData = list;
      } catch (error) {
        console.log(error);
      }
      setInterval(() => {
        this.loading = false;
      }, 500);
    },
    //分页器条数发生变化
    async handleSizeChange(val) {
      this.queryData.pagesize = val;
      await this.initData();
    },
    //分页器页数变化
    async handleCurrentChange(val) {
      this.queryData.page = val;
      await this.initData();
    },
    async edit(id) {
      const res = await getPermissionInfoList(id);
      console.log(res);
      this.$refs.addPermission.queryData = res;
      this.$refs.addPermission.dialogVisible = true;
    },
    //删除
    async del(id) {
      try {
        await this.$confirm("你确定删除当前用户吗？");
        await delPermissionApi(id);
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
        // this.$message.error("删除失败");
      }
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.zuti_container {
  a {
    text-decoration: none;
  }
}
</style>